<template>
	<view class="content">
		<view class="background display-flex flex-direction-column">

			<view class="">
				<view class="status_bar"></view>
				<view class="font-size-32 font-weight-bold" style="padding: 30rpx 60rpx 0;">
					欢迎登录
				</view>
				<image src="/static/loginbg.png" style="width: 745rpx;height: 636rpx;" mode=""></image>
			</view>
			<view style="background: #FFFFFF; border-radius: 60rpx 60rpx 0 0; margin-top: -160rpx;z-index: 1;"
				class="file-1">
				<view class="" style="padding: 56rpx 65rpx;">
					<view class="font-size-28">
						手机验证码登录
					</view>
					<view class="input margin-top-30">
						<input type="number" maxlength="11" v-model="account" placeholder="请输入手机号" class="font-size-26">
					</view>
					<view class="margin-top-30 input display-flex align-items">
						<input type="password" v-model="password" placeholder="请输入密码" class="font-size-26 file-1">
						<!-- <view @tap="getCode" class="font-size-26" style="color: #2671CE;">{{tips}}</view> -->
					</view>
				</view>
				<view class="position-fixed transform-translate-left" style="bottom: 5%;left: 50%;">
					<view class="display-flex flex-direction-column center">
						<view @click="login()" class="button text-center color-FFF font-size-26"
							style="padding: 25rpx 266rpx;width: 150rpx;">
							立即登录
						</view>
					</view>
					<view class="display-flex alig margin-top-30">
						<view @click="isAgree = !isAgree">
							<uv-icon v-if="isAgree" name="checkmark-circle-fill" color="#2671CE" size="22"></uv-icon>
							<uv-icon v-else name="checkmark-circle" color="#AAAAAA" size="22"></uv-icon>
						</view>
						<view class="font-size-24 margin-left-10">
							我已阅读并同意
							<text style="color: #2671CE;"
								@click.stop="navigateTo('/pages/web/web?src=' +config.serveURL + 'index/index/user_text'  + '&title=服务协议')">
								《服务协议》
							</text>
							和
							<text style="color: #2671CE;"
								@click.stop="navigateTo('/pages/web/web?src=' +config.serveURL + 'index/index/register_text'  + '&title=隐私政策')">
								《隐私政策》
							</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		<uv-code :seconds="seconds" ref="Verification" @change="codeChange"></uv-code>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script setup>
		import config from '@/request/config.js'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const tips = ref('');
	const seconds = ref(20);
	const Verification = ref(null)
	const password = ref('')
	const account = ref('')
	const isAgree = ref(false)
	const toast = ref(null)
	onLoad(function(option) {});
	onShow(function() {});
	async function login() {
		// console.log(1);

		if (!account.value) return nativeUI('请输入账号')
		if (!password.value) return nativeUI('请输入密码')
		if (!isAgree.value) return nativeUI('请阅读并同意协议')
		let object = {
			password: password.value,
			account: account.value
		}
		const {
			code,
			data
		} = await api.login(object)
		if (code == 1) {
			local.set('token', data.userinfo.token)
			local.set('userinfo', data.userinfo)
			uni.$uv.route({
				type: 'tab',
				url: '/pages/Home/home/home'
			})
		}
	}

	function codeChange(text) {
		tips.value = text;
	}

	function getCode() {
		if (Verification.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			setTimeout(() => {
				uni.hideLoading();
				// 这里此提示会被this.start()方法中的提示覆盖
				// uni.$uv.toast('');
				nativeUI('验证码已发送')
				// 通知验证码组件内部开始倒计时
				Verification.value.start();
			}, 2000);
		} else {

			nativeUI('倒计时结束后再发送')
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.background {
		width: 750rpx;
		height: 100vh;
		background: linear-gradient(180deg, #AECEFF 0%, #F1F7FF 100%);
	}

	.input {
		background: #F5F5F5;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
	}
</style>